<template>
	<view class="model">
		<view class="type">
			<text v-for="(item,index) in tabData" :key="index" @click="change(item,index)"
				:class="currentIndex ==index?'bChange':''">
				{{item.name}}
			</text>
		</view>
		<view class="content">
			<view class="info " v-for="(item,index) in imgList" @click="clickInfo(item,index)" :key="index">

				<image :src="item"></image>
				<view :class="checkIndex ==index?'mask':'ismask'">
					<uni-icons type="checkmarkempty" color="#2ae4bf" size="50"></uni-icons>
				</view>
			</view>
		</view>
		<view class="btnbox">
			<view class="btn" @click="jumpInfo">
				确定
			</view>
			
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	const {
		mourn,
		theme
	} = useStore()
	const {
		Theme,
		onShow
	} = useTheme()
	const {
		proxy
	} = getCurrentInstance()
	const currentIndex = ref(-1)
	const checkIndex = ref(-1)
	const url = ref()
	const tabData = ref([{
		name: '行业',
		value: 0
	}, {
		name: '餐饮',
		value: 0
	}, {
		name: '酒吧',
		value: 0
	}, {
		name: '商超',
		value: 0
	}, {
		name: '汽车连锁',
		value: 0
	}, {
		name: '美发',
		value: 0
	}, {
		name: '萌宠',
		value: 0
	}])

	const imgList = ref([
		"https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
		"https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
		"https://img1.baidu.com/it/u=833730514,666835&fm=253&fmt=auto&app=138&f=JPEG?w=355&h=500",
		"https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
		"https://img1.baidu.com/it/u=3311811998,3185175032&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625",
		"https://img0.baidu.com/it/u=3319997766,4089593231&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
		"https://img1.baidu.com/it/u=833730514,666835&fm=253&fmt=auto&app=138&f=JPEG?w=355&h=500",
		"https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
		"https://img1.baidu.com/it/u=3311811998,3185175032&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625",
		"https://img0.baidu.com/it/u=3319997766,4089593231&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
	])


	onLoad(() => {

	})
	const change = (item, index) => {
		currentIndex.value = index

	}
	const clickInfo = (item, index) => {
		console.log(item)
		checkIndex.value = index
		url.value = item
	}

	const jumpInfo = () => {
		console.log(url.value)
		proxy.sjuNav.navigateTo('/my/modelInfo?url='+url.value)
	}
</script>

<style lang="scss">
	.model {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		padding: 10px;
		box-sizing: border-box;
		background: #fff;
		margin-bottom: 60px;

		.type {
			display: flex;
			flex-direction: row;
			// justify-content: space-around;
			flex-wrap: wrap;

			text {
				width: 23%;
				height: 30px;
				margin: 10px 1%;
				line-height: 30px;
				text-align: center;
				background: #f5f5f5;
				border-radius: 5px;

			}

			.bChange {
				background-color: #0b0a34;
				color: #fff;
			}
		}

		.content {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.info {
				width: 50%;
				height: 200px;
				border-radius: 10px;
				padding: 5px;
				box-sizing: border-box;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10px;

				}

				.mask {
					width: 100%;
					height: 100%;
					background: rgba(255, 255, 255, 0.3);
					position: absolute;
					top: 0;
					left: 0;
					z-index: 9;

					.uni-icons {
						position: absolute;
						bottom: 10px;
						right: 10px
					}
				}

				.ismask{
					display: none;
				}


			}

		}

		.btnbox {
			width:100%;
			height: 60px;
			background: #fff;
			position: fixed;
			left:0;
			bottom:0;
			.btn{
				width:90%;
				height:40px;
				line-height: 40px;
				background-image: linear-gradient(to right, #191765, #0b0a35);
				margin: 10px 5%;
				border-radius: 30px;
				color:#fff;
				font-weight: bold;
				text-align: center;
			}
		}

	}
</style>